<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>

</head>
<body>
<div id="box">
    <div>
        {{computeDate}}
    </div>
    <div>
        {{computeDate1}}
    </div>
</div>
</body>
<script>
    var obj = {
        data() {
            return {
                year: 2023,
                mouth: 11,
                day: 12
            }
        },
        //计算结果会缓存
        computed:{
            computeDate:{
                get(){
                    return this.year +"-" + this.mouth + "-" + this.day
                },
                set(value){//该方式通过app.computeDate1=2021的方式修改
                    // let split = value.split("-")
                    // this.year = split[0]
                    // this.day = split[2]
                    // this.mouth = split[1]
                    [this.year,this.month,this.day] = value.split("-")
                }
            },
            //该方式通过app.computeDate1=2021的方式无法修改
            computeDate1(){
                console.log("compute") ////执行一遍
                return this.year +"-" + this.mouth + "-" + this.day
            }
        }

    }
    var app = Vue.createApp(obj).mount("#box")
</script>
</html>